<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      * {
         margin: 0;
      }

      body {
         /* line-height指文本基线之间的距离，严格来说并不是行距
              间距/行距 = line-height - font-size = 2*半间距
           */
         /* line-height 的赋值 normal指默认，不同浏览器是不同的
              纯数字，长度，百分比
           */
         /* line-height: normal; */
         /* body-line-height = 1*20px = 20px  */
         font-size: 20px;
         /* line-height: 100%; */
         /* body-line-height = 2*20px = 40px  */
         line-height: 2;
      }

      h1 {
         font-size: 50px;
         background: #000;
         color: deeppink;
      }

      .p1 {
         background: #cc33bb;
      }

      .p2 {
         background: #ffdf57;
      }
   </style>
</head>

<body>
   <h1>仔细观察行间距是多少</h1>
   <p class="p1">We can never know what to want, because,</p>
   <p class="p2">living only one life,</p>
</body>

</html>